<template>
<div class="page shiftSchedule-page" data-page="shiftSchedule"
	style="z-index: 2;">
	<div class="link-page-nav">
		<a href="#" class="link" @click="$root.backToTab()"> <i
			class="iconfont icon-zuo"></i>
		</a>
	</div>
	<div class="link-page-top" style="padding-bottom: 17px;">
		<div class="link-page-title">值班表</div>

	</div>
	<div class="page-content" style="padding-bottom: 100px">
		<div class="shiftSchedule-page-top">
			<div id="shiftScheduleCalender"></div>
		</div>
		<div class="shiftSchedule-page-content">
			<div>
				<input class="page-punch-date" id="punchDate" />
			</div>
			<div class="page-punch-list">
				
			</div>
		</div>
	</div>
</div>
</template>

<script>
	return {
		data : function() {
			return {
				startTime : moment().format("YYYY-MM-DD 00:00:00"),
				endTime: moment().format("YYYY-MM-DD 23:59:59"),
				startDate: '',
				endDate: "",
				searTime:"",
				orgId : this.$route.params.organizationId,
			}
		},
		methods : {
			createCalendar : function() {
				var self = this;
				var monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月' , '9月' , '10月', '11月', '12月'];
				var month = ['01', '02', '03', '04', '05', '06', '07', '08' , '09' , '10', '11', '12'];
				var calendarInline = app.calendar.create({
					 containerEl: '#shiftScheduleCalender',
					 value: [new Date()],
					 dateFormat: 'mm月dd日   DD',
					 inputEl: '#punchDate',
					 weekHeader: false,
					 renderToolbar: function(){
						 return '<div class="toolbar calendar-custom-toolbar no-shadow">' +
	                        '<div class="toolbar-inner">' +
	                            '<div class="left">' +
	                            '<a href="#" class="link icon-only"><i class="icon icon-back ' + (app.theme === 'md' ? 'color-black' : '') + '"></i></a>' +
	                            '</div>' +
	                            '<div class="center"></div>' +
	                            '<div class="right">' +
	                            '<a href="#" class="link icon-only"><i class="icon icon-forward ' + (app.theme === 'md' ? 'color-black' : '') + '"></i></a>' +
	                            '</div>' +
	                        '</div>' +
	                      '</div>';
					 },
					 on: { 
						 init: function (c) {
							 $(".calendar-day-today").append(`<div class="icon-today"><i class="iconfont icon-jintian-"></i></div>`);
							 $('.calendar-custom-toolbar .center').text(c.currentYear + '年' + monthNames[c.currentMonth]);
							 //$("#punchDate").html(monthNames[c.currentMonth] +"月" + day+"日");
							 $('.calendar-custom-toolbar .left .link').on('click', function () {
								 calendarInline.prevMonth();
	                          });
	                          $('.calendar-custom-toolbar .right .link').on('click', function () {
	                             calendarInline.nextMonth();
	                          });

	                          //前一个月
                        	  self.startDate = moment(new Date()).subtract(1,'months').format('YYYY-MM')+ "-01 00:00:00";
                        	  //后一个月
                        	  self.endDate = moment(new Date()).add(1,'months').endOf('months').format("YYYY-MM-DD")+" 23:59:59"; 
                        	  self.searTime = c.currentYear + "-" +month[c.currentMonth] + "-01";
	                        },
	                        monthYearChangeStart: function (c) {
	                            $('.calendar-custom-toolbar .center').text(c.currentYear + '年' + monthNames[c.currentMonth]);
	                            self.searTime = c.currentYear + "-" + month[c.currentMonth] + "-01";
                        	    self.startDate = moment(new Date(self.searTime)).format('YYYY-MM')+ "-01 00:00:00";
                        	    self.endDate = moment(new Date()).add(1,'months').endOf('months').format("YYYY-MM-DD")+" 23:59:59";
                        	    self.getMonthPuchList(); 
	                        },
	                        calendarDayClick:function (c,value) {
	                            var y = c.currentYear;
	                            var m = c.params.monthNames[c.currentMonth];
	                            var day = $(value).attr("data-day");
	                            self.startTime = y + "-" + m +"-" + day + " 00:00:00";
	        					self.endTime = y + "-" + m +"-" + day + " 23:59:59";
	                            if(self.compareDate(y + "-" + m +"-" + day)) {  // 过去（包括今天）
	                            	self.getPunchList();
	                            } else {
	                            	self.getPuchListOfFuture();
	                            }
	                        }
	                    }
				});
			},

			getPunchList : function() {
				var self = this;
				Dao.getOndutyRecordsForApp({
					orgId : self.orgId,
					startTime : self.startTime,
					endTime: self.endTime 
					//startTime : "2019-05-13 00:00:00",
					//endTime: "2019-05-13 23:59:59"
				}, function(data) {
					 if (data.length > 0) {
					 	$(".page-punch-list").empty();
					 	$("#morningShift").empty();
						$("#middleShift").empty();
						$("#nightShift").empty();
						for (var i = 0; i < data.length; i++) {
							var detailList = data[i].ondutyDetails;
							var html = "",str="";
							if(detailList.length > 0) {
								for(var n=0;n<detailList.length;n++){
									var onStr="",offStr="";
									if(detailList[n].ondutyResult == 2) { // 打卡异常
										onStr = `<span><div class="abnormal"></div>
										<span><label>`+detailList[n].ondutyTime.substring(10,16)+`</label>上班迟到</span></span>`;
									} else if(detailList[n].ondutyResult == 1) {
										onStr = `<span><div class="normal"></div> 
										<span><label>`+detailList[n].ondutyTime.substring(10,16)+`</label>上班正常</span></span>`;
									} else if (detailList[n].ondutyResult == 4) { //未开始
										onStr = `<span><span></span></span>`;
									} else {
										onStr = `<span><div class="noPunch"></div><span>上班未打卡</span></span>`;
									}
								
									if(detailList[n].offdutyResult == 3) { // 打卡异常
										offStr = `<span><div class="abnormal"></div>
										<span><label>`+detailList[n].offdutyTime.substring(10,16)+`</label>下班早退</span></span>`;
									} else if(detailList[n].offdutyResult == 1) {
										offStr = `<span><div class="normal"></div> 
										<span><label>`+detailList[n].offdutyTime.substring(10,16)+`</label>下班正常</span></span>`;
									} else if (detailList[n].offdutyResult == 4) { //未开始
										offStr = `<span><span></span></span>`;
									} else {
										offStr = `<span><div class="noPunch"></div><span>下班未打卡</span></span>`;
									}
									
									html += `<li><div class="left">
									   <img src="`+picPeopleNo(detailList[n].headUrl)+`"></div>
									   <div class="right">
									   <p>`+detailList[n].onDutyAccountName+`</p>
									   <div>`+onStr+offStr+`</div></div></li>`;
								} 
							} else {
								html = `<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`;
							}
							str = data[i].daysInterval==0?'':' (第'+(data[i].daysInterval+1)+'天)';
							$(".page-punch-list").append(`
								<div class="punch-list-item">
					              <div class="punch-date">
						            <span>`+data[i].className+` `+data[i].startTime+`-`+data[i].endTime+str+`</span>
					              </div>`+html+`</div>
							`);
						}
					} else {
					    $(".page-punch-list").html(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
					}
				});
			},
			
			// 将来的值班信息
			getPuchListOfFuture:function() {
				var self = this;
				Dao.getOndutyRecordsForApp({
					orgId : self.orgId,
					startTime : self.startTime,
					endTime: self.endTime 
				}, function(data) {
					if (data) {
						$("#morningShift").empty();
						$("#middleShift").empty();
						$("#nightShift").empty();
						$(".page-punch-list").empty();
						for (var i = 0; i < data.length; i++) {
							var html ="";
							var detailList = data[i].ondutyDetails;
							if(detailList.length > 0) {
								 for(var n=0;n<detailList.length;n++){
									html += `<li><div class="left">
										<img src="`+picPeopleNo(detailList[n].headUrl)+`"></div>
										<div class="right">
										<p>`+detailList[n].onDutyAccountName+`</p>
										<div><span><span>未开始</span></span></div></div></li>`;
										
								}
							} else {
								html = `<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`;
							}
							$(".page-punch-list").append(`
								<div class="punch-list-item">
					              <div class="punch-date">
						            <span>`+data[i].className+` `+data[i].startTime+`-`+data[i].endTime+`</span>
					              </div><ul>`+html+`</ul></div>
							`);
						}
					}
				});
			},

			// 获取当月值班统计
			getMonthPuchList: function() {
				var self = this;
				Dao.getOrgWatchInfoList({
					orgId : self.orgId,
					startTime : self.startDate,
					endTime: self.endDate 
				},function(data){
					if (data.length > 0) {
						for (var i = 0; i < data.length; i++) {
							var time = data[i].time;
							var attrValue = time.toString().substring(0,4)+"-"+ (parseInt(time.toString().substring(5,7))-1)+"-"+ time.toString().substring(8,10).replace(/^[0]+/,"");
							if (data[i].result == 0) { // 0表示有异常值班，
								$("#shiftScheduleCalender").find(".calendar-row div[data-date='"+attrValue+"'] span").addClass("calendarDay abnormalColor");
							} else { // 1表示正常
								$("#shiftScheduleCalender").find(".calendar-row div[data-date='"+attrValue+"'] span").addClass("calendarDay normalColor");
							}
						}
					} else {

					}
				});
			},

			//判断时间
			compareDate:function(date){
				var beginDate = moment().format("YYYY-MM-DD");
				var now = new Date(beginDate.replace(/\-/g, "\/"));
				var time = new Date(date.replace(/\-/g, "\/"));
				if(now >= time) {
					return true;
				} else {
					return false;
				}
			}
		},
		on : {
			pageInit : function(e, page) {
				var self = this;

				self.createCalendar();
				self.getPunchList();
				self.getMonthPuchList();
			}
		}
	}
</script>
<style scoped>
.icon-today {
	position: absolute;
	top: 20px;
}

#shiftScheduleCalende  .abnormalColor:after {
	background: #e07762 !important;
}
   
#shiftScheduleCalende .normalColor:after {
	background: #69ba71 !important;
}

#shiftScheduleCalender .calendar-day.calendar-day-today span {
	background: rgba(225, 225, 225, 1);
	opacity: 0.5;
	border-radius: 50%;
	color: #000;
}

#shiftScheduleCalender .calendar-day.calendar-day-today .icon-today {
	color: #000;
}

#shiftScheduleCalender .calendar-day.calendar-day-selected span {
	background: #2196f3;
	color: #fff;
	opacity: 1;
}

#shiftScheduleCalender .calendar-day.calendar-day-selected .icon-today {
	color: #fff;
}
</style>